import 'package:flutter/material.dart';
import 'models/detail_model.dart';
import 'component.dart';

//表格内容高度
const tableBodyHeight = 25.0;
//表格水平表头高度
const horizontalHeadHeight = 35.0;
//表格水平表头宽度
const vorticalHeadWidth = 100.0;
//表格宽度设置
const tableHericalWidthMap = const {
  0: FlexColumnWidth(2),
  1: FlexColumnWidth(2),
  2: FlexColumnWidth(1)
};
//表格边框设置
TableBorder tableBorder = TableBorder.all(color: Color(0xFF202836), width: 1);

const tableTitles = ['当前数据', '环比昨日/上周/上月数据', '增减率'];
const allIndexes = ['当前', '昨日', '上周', '上月'];
const columns = [
  '存款差额',
  '存款总额',
  '提款总额',
  '存款人数',
  '注册人数',
  '首存人数',
  '提款人数',
  '首存总额',
  '次存人数',
  '次存总额',
  '快入人数',
  '在支人数',
  'PC人数',
  'H5人数',
  'App人数',
  '注单人数',
  '有效投注',
  '派彩输赢',
  '新客存款总额',
  '新客提款总额',
  '新客有效投注额',
  '新客人数'
];

class SingleDetailTable extends StatefulWidget {
  SingleDetailTable(
      {Key key,
      this.isLoad = false,
      this.hasError = false,
      this.model,
      this.filterItems = allIndexes,
      this.onClick})
      : super(key: key);
  final bool hasError;
  final bool isLoad;
  final List<String> filterItems;
  final SinglePlatDetailModel model;
  final void Function(int) onClick;

  @override
  _SingleDetailTableState createState() {
    return _SingleDetailTableState();
  }
}

class _SingleDetailTableState extends State<SingleDetailTable> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
              height: horizontalHeadHeight,
              child: Row(
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                    width: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Color(0xFF202836)
                      )
                    ),
                    child: Center(
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            widget.filterItems[currentIndex],
                            style: TextStyle(color: Color(0xFF758BB5)),
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Image(
                            image: AssetImage('images/arrow_down.png'),
                            width: 10,
                          )
                        ],
                      ),
                    ),
                  ),
                    onTap: (){
                      //changeDateType();
                    },
                  ),
                  Expanded(
                    child: makeTableHorvicalHeader(),
                  )
                ],
              )),
          Expanded(
            child: SingleChildScrollView(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 100,
                    child: makeTableVerticalHeader(),
                  ),
                  Expanded(
                    child: makeTableBody(),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  //横向表头
  Table makeTableHorvicalHeader() {
    return Table(
        border: tableBorder,
        columnWidths: tableHericalWidthMap,
        children: [
          TableRow(
              children: tableTitles.map((e) {
            return TableCell(
                child: Container(
                    height: horizontalHeadHeight,
                    child: Center(
                        child: Text(
                      e,
                      style: TextStyle(color: Color(0xFF758BB5)),
                    ))));
          }).toList())
        ]);
  }

  //纵向表头
  Table makeTableVerticalHeader() {
    return Table(
      border: tableBorder,
      children: columns
          .map((e) => TableRow(children: [
                Container(
                  height: tableBodyHeight,
                  child: Center(
                    child: Text(
                      e,
                      style: TextStyle(color: Color(0xFF758BB5)),
                    ),
                  ),
                )
              ]))
          .toList(),
    );
  }

  //表格内容
  Widget makeTableBody() {
    if (widget.isLoad) {
      return Container(width: 100,height: 100,child: LoadingBlock(),);
    }
    if (widget.hasError) {
      return Container(
        height: 350,
        child: ErrorBlock(
          errorType: ErrorType.invalidData,
        ),
      );
    }
    if(widget.model == null) {
      return Container(
        height: 350,
        child: Center(
            child: ErrorBlock(
              errorType: ErrorType.noData,
            )),
      );
    }

    SinglePlatDetailData data = widget.model.resObj;
    if (data == null) {
      return Container(
        height: 350,
        child: Center(
            child: ErrorBlock(
              errorType: ErrorType.noData,
            )),
      );
    }
    DetailDataEntity curData = data.currentData;
    DetailDataEntity yestodayData = data.yesterDayData;
    DetailDataEntity lastWeekData = data.lastWeekData;
    DetailDataEntity lastMonthData = data.lastMonthData;

    if (curData == null ||
        yestodayData == null ||
        lastWeekData == null ||
        lastMonthData == null) {
      return Container(
        height: 350,
        child: Center(
            child: ErrorBlock(
              errorType: ErrorType.noData,
            )),
      );
    }
    DetailAnalyzeRes analyzeRes = DetailAnalyzeRes(
        curData: curData,
        yestodayData: yestodayData,
        lastWeekData: lastWeekData,
        lastMonthData: lastMonthData);
    var contentTableItems = makeTableItems(analyzeRes);
    return Container(
        child: Table(
      border: tableBorder,
      columnWidths: tableHericalWidthMap,
      children: contentTableItems
          .map((e){
      var ringRate =
          '${e[1][1].toStringAsFixed(2)}/${e[1][2].toStringAsFixed(2)}/${e[1][3].toStringAsFixed(2)}';
            return TableRow(
              children: [
                Container(
                  height: 25,
                  child: Center(
                      child: Text('${e[1][0].toStringAsFixed(2)}',
                          style: TextStyle(color: Color(0xFF758BB5)))),
                ),
                Container(
                  height: 25,
                  child: Center(
                      child: Text('${ringRate}',
                          style: TextStyle(color: Color(0xFF758BB5)))),
                ),
                Container(
                  height: 25,
                  child: Center(
                      child: Text('${e[1][4].toStringAsFixed(2)}',
                          style: TextStyle(color: Color(0xFF758BB5)))),
                )
              ]);})
          .toList(),
    ));
  }

  Future<void> changeDateType() async {
    int i = await showDialog<int>(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
              title: const Text('日期类型'),
              children: widget.filterItems.map((e) {
                var curIdx = widget.filterItems.indexOf(e);
                return SimpleDialogOption(
                  onPressed: () {
                    // 返回1
                    Navigator.pop(context, curIdx);
                  },
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 6),
                    child: Text(e),
                  ),
                );
              }).toList());
        });

    if (i != null) {
      setState(() {
        currentIndex = i;
      });
      widget.onClick(i);
    }
  }

  List makeTableItems(DetailAnalyzeRes res) {
    return [
      [
        '存款差额',
        res.profitAmount,
      ],
      ['存款总额', res.totalDepositAmount],
      ['提款总额', res.totalAtmAmount],
      ['存款人数', res.totalDepositCount],
      ['注册人数', res.totalRegistCount],
      ['首存人数', res.depositFirstCount],
      ['提款人数', res.atmCount],
      ['首存金额', res.depositFirstAmount],
      ['次存人数', res.depositSecondCount],
      ['次存总额', res.depositSecondAmount],
      ['快入人数', res.depositQuickCount],
      ['在支人数', res.depositOnlineCount],
      ['PC人数', res.depositPcCount],
      ['H5人数', res.depositWapCount],
      ['App人数', res.depositAppCount],
      ['注单人数', res.betCount],
      ['有效投注', res.betValidAmount],
      ['派彩输赢', res.betPayoutAmount],
      ['新客存款总额', res.newClientTotalDeposit],
      ['新客提款总额', res.newClientTotalAtm],
      ['新客有效投注额', res.newClientBetValidAmount],
      ['新客人数', res.newClientCount],

    ];
  }
}
